<template>
	<view class="index_warp">
		<view class="top_nav_line">
			<view class="statusBar"></view>
			<view class="flex f_align f_align_center top_search">
				<view class="logo" @click="goBack">
					<image class="autoImg" src="/static/ico/logo@2x.png" mode=""></image>
				</view>
				<input :auto-focus="itemWarps" @focus="itemWarps = true" @blur="blurItem" @input="searchItem" class="home_search" placeholder-style="placeStyle" placeholder="搜索需要查询的项目" type="text" value="" />
				<view v-if="!itemWarps" class="msg" @click="$navTo('../notice/notice')">
					<i class="iconfont">&#xe6ff;</i>
				</view>
				<view v-else class="msg f_shrink0" @click="itemWarps = false">
					<i class="iconfont">&#xe707;</i>
				</view>
			</view>
			<view class="top_menu">
				<view :class="orderType == '' ? 't_m_item active' : 't_m_item'" @click="tabCloneItem('')">
					<view class="i_ico">
						<image class="autoImg" src="/static/image/vip@2x.png" mode=""></image>
					</view>
					<text class="bold">首推项目</text>
				</view>
				<view :class="orderType == '0' ? 't_m_item active' : 't_m_item'" @click="tabCloneItem('0')">
					<view class="i_ico">
						<image class="autoImg" src="/static/image/list@2x.png" mode=""></image>
					</view>
					<text class="bold">最新发布</text>
				</view>
				<view :class="orderType == '1' ? 't_m_item active' : 't_m_item'" @click="tabCloneItem('1')">
					<view class="i_ico">
						<image class="autoImg" src="/static/image/all@2x.png" mode=""></image>
					</view>
					<text class="bold">热度最高</text>
				</view>
				<view :class="orderType == '2' ? 't_m_item active' : 't_m_item'" @click="tabCloneItem('2')">
					<view class="i_ico">
						<image class="autoImg" src="/static/image/good@2x.png" mode=""></image>
					</view>
					<text class="bold">关注项目</text>
				</view>
			</view>
		</view>
		<template v-if="orderType == null">
			<view class="inter flex f_column">
				<swiper @change="onSwiperChangeStep" :autoplay="true" style="height: 480rpx;">
					<swiper-item
						v-for="(item,index) in navlist.list"
						:key="index"
						@click="$navTo(`../projectDetail/projectDetail?itemId=${item.itemEntity.itemId}`)"
					>
						<view class="f f_column top_item_warps">
							<view class="f">
								<image class="userHeads f_shrink0" :src="item.itemEntity.userHeadUrl" mode=""></image>
								<view class="f f_column">
									<text class="bold overfont titles">{{item.itemEntity.itemName}} </text>
									<view v-if="item.itemEntity.itemTagType" class="flex f_align_center">
										<view v-for="(item,index) in item.itemEntity.itemTagType.split(',')" :key="index" class="t_t_btn f_shrink0">{{$getDict(item_tag_type,item)}}</view>
									</view>
								</view>
							</view>
							<view class="overfont-3 contents">
								{{item.itemEntity.itemDetail}}
							</view>
							<view class="f f_align_center">
								<view class="itemImage f_shrink0"
									v-for="(item,index) in item.itemEntity.detailImgList.slice(0,4)" :key="index"
								>
									<image class="autoImg" :src="item"></image>
								</view>
							</view>

							<view class="f f_align_center bold f_align bb_counts">
								<view>浏览数：<text class="tips">{{item.itemEntity.viewCount}}</text></view>
								<view>点赞数：<text class="tips">{{item.itemEntity.likeCount}}</text></view>
								<view>关注数：<text class="tips">{{item.itemEntity.concernCount}}</text></view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="step_bar">
					<view
						v-for="(item,index) in navlist.list.length"
						:key="index"
						:class="index == navlist._index ? 'step_bar_item active' : 'step_bar_item'"
					></view>
				</view>
				<!-- 官方公共 -->
				<view class="flex notice_line" v-if="noticeSwiper.length > 0">
					<view class="notice">
						<image class="autoImg" src="/static/image/notice@2x.png" mode=""></image>
					</view>
					<swiper class="swiper_notice" :vertical="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item
							v-for="(item,index) in noticeSwiper" :key="index"
							@click="$navTo(`../notice/notcieDetail?id=${item.id}`)"
						>
							<view class="swiper-item overfont">{{item.title}}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="inter">
				<view class="gd_notice flex f_align">
					<view class="gb_l_tt">
						<view class="l_cio"></view>
						<text class="bold">固定头条</text>
						<text>排名不分先后</text>
					</view>
					<view class="gb_r_btn" @click="toRanks">
						我要上头条
					</view>
				</view>
				<view class="flex f_warp">
					<view
						class="tt_w_item f f_column f_align f_align_center"
						v-for="(item,index) in myHeadLineAll" :key="index"
						@click="$navTo(`../projectDetail/projectDetail?itemId=${item.itemEntity.itemId}`)"
					>
						<view class="tt_ico_lo">
							<image class="autoImg" :src="item.itemEntity.headImg" mode=""></image>
						</view>
						<view class="font_text overfont">{{item.itemEntity.itemName}}</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="inter flex f_column f_warp">
				<view
					class="inter_v f"
					v-for="(item,index) in itemList" :key="index"
					@click="$navTo(`../projectDetail/projectDetail?itemId=${item.itemId}`)"
				>
					<view class="left_i f_shrink0">
						<image class="autoImg" :src="item.headImg" mode=""></image>
					</view>
					<view class="r_i_item f f_column">
						<view class="flex t_tit">
							<text class="bold overfont">{{item.itemName}} </text>
							<view class="t_t_btn f_shrink0" v-if="item.itemTagType">{{$getDict(item_tag_type,item.itemTagType.split(',')[0])}}</view>
						</view>
						<view class="overfont-2">
							{{item.itemDetail}}
						</view>
						<view class="bb_time">
							{{item.createTime}}</view>
					</view>
				</view>
				<!-- 加载 -->
				<loadMore :isLoading="isLoading" :isDone="isDoneTask" />
			</view>
		</template>

		<view class="search_warps" v-if="itemWarps">
			<view
				class="search_warps_item bold"
				v-for="(item,index) in searchList" :key="index"
				@click="$navTo(`../projectDetail/projectDetail?itemId=${item.itemId}`)"
			>
				{{item.itemName}}
			</view>
			<view v-if="searchList.length <= 0" class="search_warps_item f f_align_center f_center">
				请输入搜索内容～
			</view>
		</view>

		<!-- 中间键功能 -->
		<mainBtn />
	</view>
</template>

<script>
	import { mapMutations, mapState } from 'vuex';
	import loadMore from '@/components/loadMore/loadMore';
	import mainBtn from '@/components/mainBtn/mainBtn.vue'
	export default {
		data() {
			return {
				orderType:null,
				myProject:[],
				myHeadLine:[],
				myHeadLineAll:[],

				isLoading:false,
				isDoneTask:false,
				itemList:[],
				page:{
					pageIndex:1,
					limit:10,
					totalPage:0
				},

				itemWarps:false,
				searchList:[],

				navlist:{
					_index:0,
					list:[]
				},
				botIndex:0,
				noticeSwiper:[]
			}
		},
		components:{
			mainBtn,loadMore
		},
		onShow() {
			this.OPEN_MID_BTN(false);
		},
		computed:{
			...mapState({
				item_tag_type:state => state.dictArrs.item_tag_type
			})
		},
		onLoad() {
			this.$store.dispatch('getDictlists','item_tag_type');
			this.init();
			this.getNotice();
		},
		methods: {
			...mapMutations([
				'OPEN_MID_BTN'
			]),
			init(){
				if(this.orderType != null){
					this.page.pageIndex = 1;
					this.init_item();
				}else{
					this.top_pro_item();
					this.head_line_item();
				}
			},
			//查询项目
			async top_pro_item(){
				const _this = this;
				let res = (await _this.$http('/api/unAuth/item/listCarouselItem','POST',{})).data;
				uni.stopPullDownRefresh();
				if(res && res.code == '0'){
					let list = res.data;
					_this.navlist.list = list;
				}else{
					_this.$showToast(res.msg);
				}
			},
			//头条项目
			async head_line_item(){
				const _this = this;
				let res = (await _this.$http('/api/unAuth/item/listFixedHeadlineItem','POST',{})).data;
				uni.stopPullDownRefresh();
				if(res && res.code == '0'){
					let list = res.data;
					_this.myHeadLine = list;
					_this.myHeadLineAll = list.slice(0,12);

				}else{
					_this.$showToast(res.msg);
				}
			},
			onSwiperChangeStep(e){
				this.navlist._index = e.detail.current;
			},
			//
			tabCloneItem(type){
				const _this = this;
				if(_this.orderType == type){
					_this.orderType = null;
				}else{
					_this.orderType = type;
					_this.page.pageIndex = 1;
					_this.init_item();
				};

			},
			//查询变更记录
			async init_item(){
				const _this = this;
				_this.isLoading = true;
				_this.isDoneTask = false;
				let res = (await _this.$http('/api/unAuth/item/listUserItem','POST',{
					page:_this.page.pageIndex,
					limit:_this.page.limit,
					orderType:_this.orderType == null ? '' : _this.orderType
				})).data;
				uni.stopPullDownRefresh();
				_this.isLoading = false;
				if(res && res.code == '0'){
					let list = res.data.list;
					_this.page.totalPage = res.data.totalPage;
					if(_this.page.pageIndex <= 1){
						_this.itemList.splice(0);
					}
					if(_this.page.totalPage <= _this.page.pageIndex){
						_this.isDoneTask = true;
					}else{
						_this.isDoneTask = false;
					}
					_this.itemList = _this.itemList.concat(list);
				}else{
					_this.$showToast(res.msg);
				}
			},
			//搜索项目哦
			async searchItem(e){
				const _this = this;
				_this.isLoading = true;
				let res = (await _this.$http('/api/unAuth/item/listUserItem','POST',{
					page:1,
					limit:10,
					itemName:e.target.value
				})).data;
				if(res && res.code == '0'){
					_this.searchList = res.data.list;
				}
			},
			blurItem(){
				setTimeout(()=>{
					this.itemWarps = false;
				},300)
			},
			//返回首页
			goBack(){
				this.orderType = null;
			},
			//获取公共
			async getNotice(){
				const _this = this;
				let res = (await _this.$http('/api/unAuth/communique/listCommunique','POST',{page:1,limit:10})).data;
				if(res && res.code == '0'){
					_this.noticeSwiper = res.data.list;
				}
			},
			toRanks(){
				let token = uni.getStorageSync('token')
				if(token == ''){
					this.$loginAuth();
				}else{
					this.$navTo('../headLine/headLine')
				}
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		//滚动到底部
		onReachBottom() {
			const _this =this;
			console.log(_this.botIndex, Math.floor(_this.myHeadLine.length/8));
			if(_this.orderType != null){
				if(_this.page.pageIndex < _this.page.totalPage){
					_this.page.pageIndex++;
					_this.init();
				}else{
					_this.isDoneTask = true;
				}
			}else{
				setTimeout(()=>{
					_this.botIndex ++;
					if(_this.botIndex <= Math.floor(_this.myHeadLine.length/12)){
						let lists = _this.myHeadLine.slice(_this.botIndex*12,(_this.botIndex+1)*12);
						_this.myHeadLineAll = _this.myHeadLineAll.concat(lists);
					}
				},300)
			}
		},
		//tab点击事件
		onTabItemTap(e) {
			this.goBack();
		}
	}
</script>

<style scoped lang="scss">
	.index_warp {
		background-color: #F6F6F6;
		min-height: 100vh;
		.t_t_btn{
			padding: 2rpx 4rpx;
			font-size: 20rpx;
			color: #0984FF;
			margin-right: 16rpx;
			border: solid 1rpx #0984FF;
			border-radius: 4rpx;
			@include flex_center;
		}
		.top_item_warps{
			padding: 16rpx 0;
			.titles{
				margin-bottom: 12rpx;
			}
			.contents{
				color: #999;
				font-size: 28rpx;
				height: 115rpx;
				margin-top: 22rpx;
				overflow: hidden;
			}
			.userHeads{
				width: 86rpx;height: 86rpx;
				border-radius: 50%;
				margin-right: 18rpx;
			}
			.itemImage{
				width: 160rpx;height: 160rpx;
				@include flex_center;
				margin: 12rpx 18rpx 16rpx 0;
				&:last-child{
					margin-right: 0;
				}
			}
			.bb_counts{
				font-size: 24rpx;
				color: #111A2B;
				.tips{
					color: #AFB2B8;
					font-weight: normal;
				}
			}
		}


		.search_warps{
			box-sizing: border-box;
			width: 100%;
			min-height: 300rpx;
			background-color: rgba($color: $ych_color, $alpha: 0.7);
			position: fixed;
			top:calc(var(--status-bar-height) + 88rpx);
			z-index: 1002;
			padding: 0 24rpx;
			color: #fff;
			border-radius: 0 0 20rpx 20rpx;
			.search_warps_item{
				padding: 20rpx 0;
			}
		}
		.top_nav_line{
			display: flex;
			flex-direction: column;
			background-color: $ych_color;
			position:sticky;
			top: 0;
			z-index: 1000;
			.top_search{
				height: 88rpx;
				padding: 12rpx 24rpx;
				.logo{
					width: 120rpx;
					height: 50rpx;
				}
				.msg{
					width: 50rpx;
					height: 44rpx;
					color: #fff;
					.iconfont{font-size: 40rpx;}
				}
				.home_search{
					box-sizing: border-box;
					width: 450rpx;
					height: 64rpx;
					border-radius: 30rpx;
					padding: 0 20rpx 0 68rpx;
					background:#fff url('/static/ico/search@2x.png') no-repeat 26rpx center;
					background-size: 28rpx 28rpx;
				}
			}
			.top_menu{
				width: 100%;
				height: 144rpx;
				padding: 0 36rpx;
				box-sizing: border-box;
				@include flex_align;
				background-color: #fff;
				@include box_shandow0;
				.t_m_item{
					@include flex_cloumn_center;
					font-size: 28rpx;
					color: #1A1A1A;
					border-bottom: solid 4rpx #FFF;
					.i_ico{
						width: 80rpx;height: 80rpx;
					}
					&.active{
						color: #0984FF;
						border-bottom: solid 4rpx #0984FF;
					}
				}
			}
		}

		.inter{
			padding: 0 24rpx 12rpx;
			background-color: #fff;
			@include box_shandow0;
			margin-top: 8rpx;
			.swiper_warp_item_height{
				height: 200rpx;
			}
			.step_bar{
				width: 100%;
				@include flex_center;
				.step_bar_item{
					width: 8rpx;height: 6rpx;
					background-color:#E2DDDA;
					border-radius: 3rpx;
					margin-left: 6rpx;
					&.active{
						width: 24rpx;
						background-color: $ych_color;
					}
				}
			}
			.inter_v{
				@include flex_align;
				padding: 16rpx 0 0;
				.left_i{
					width: 112rpx;height: 112rpx;
					margin-right: 20rpx;
					image{
						border-radius: 4rpx;
					}
				}
				.r_i_item{
					width: 100%;
					padding-bottom: 16rpx;
					border-bottom: solid 1rpx #E6E6E6;
					color: #999;
					font-size: 24rpx;
					position: relative;
					.t_tit{
						font-size: 32rpx;
						color: #1A1A1A;
						margin-bottom: 7rpx;
						.t_t_btn{
							padding: 2rpx 4rpx;
							font-size: 20rpx;
							color: #0984FF;
							margin-left: 16rpx;
							border: solid 1rpx #0984FF;
							border-radius: 4rpx;
							@include flex_center;
						}
					}
					.bb_time{
						text-align: right;
						font-size: 20rpx;
					}
				}
			}
			.notice_line{
				font-size: 28rpx;
				color: #999;
				padding-top: 16rpx;
				.notice{
					width: 160rpx;height: 40rpx;
					flex-shrink: 0;
				}
				.swiper_notice{
					width: 100%;
					height: 40rpx;
				}
			}
			.gd_notice{
				padding-top: 12rpx;
				.gb_l_tt{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					.bold{
						font-size: 36rpx;
						color: #1A1A1A;
						margin-right: 8rpx;
					}
					.l_cio{
						width: 8rpx;height: 28rpx;
						background-color: $ych_color;
						border-radius: 5rpx;
						margin-right: 8rpx;
					}
				}
				.gb_r_btn{
					font-size: 24rpx;
					color: #fff;
					background-color: #FC0207;
					border-radius: 8rpx;
					padding: 10rpx 17rpx;
					@include flex_center
				}
			}
			.tt_w_item{
				width: 25%;
				font-size: 24rpx;
				color: #333;
				.tt_ico_lo{
					width: 162rpx;
					height: 162rpx;
					margin-bottom: 4rpx;
					margin-top: 16rpx;
					image{
						border-radius: 4rpx;
					}
				}
				.font_text{
					width: 160rpx;
					text-align: center;
				}
			}
		}
	}
</style>
